<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王朝档案管理</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/dynasty.css' %}">
    <script src="{% static 'js/xlsx.js' %}"></script>
    {#    在线导出文件,js文件不能取名有点，符合标识符命名规则，否则报错#}
</head>
<body>
    <nav id="topnav">
        <div class="container">
            <ul class="nav-list">
                <li><a href="/polls/index/" class="nav-link">首页</a></li>
                <li><a href="/polls/dynasty/" class="nav-link">王朝</a></li>
                <li><a href="/polls/character/" class="nav-link">人物</a></li>
                <li class="user-menu">
                    <span>{{ stdata.std_name }}</span>
                    <a href="/polls/index/" onclick="goBack()" class="logout-btn">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="locate">
        <a href="#topnav" class="locate-link">
            <img src="{% static 'img/direct.svg' %}" alt="返回顶部">
{#            <span style="font-size: 20px;font-weight: bolder">∧</span>#}
            <span class="topup">顶部</span>
        </a>
    </div>
    <div class="container">
        <h1>王朝档案管理</h1>

        <!-- 新增表单部分 -->
        <div class="form-section">
{#            <form action="/polls/dynasty/" method="post">#}
            <form action="{% url 'toDynasty' %}" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label>王朝名称</label>
                    <input type="text" name="name" required>
                </div>
                <div class="form-group">
                    <label for="establish_time">建立时间:</label>
                    <input type="text" id="establish_time" name="establish_time" required>
                </div>
                <div class="form-group">
                    <label for="process">建立过程:</label>
                    <input type="text" id="process" name="process" required>
                </div>
                <div class="form-group">
                    <label for="political">政治制度:</label>
                    <input type="text" id="political" name="political" required>
                </div>
                <div class="form-group">
                    <label for="military">军事制度:</label>
                    <input type="text" id="military" name="military" required>
                </div>
                <div class="form-group">
                    <label for="demist_time">灭亡时间:</label>
                    <input type="text" id="demist_time" name="demist_time">
                </div>
                <div class="form-group">
                    <label for="meaning">历史意义:</label>
                    <input type="text" id="meaning" name="meaning" required>
                </div>
                <div style="text-align: center;">
                    <input type="submit" name="action" value="新增">
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <table id='myTable'>
            <thead>
                <tr>
                    <th class="sortable">编号</th>
                    <th>王朝</th>
                    <th class="sortable">建立时间</th>
                    <th>建立过程</th>
                    <th>政治制度</th>
                    <th>军事制度</th>
                    <th>灭亡时间</th>
                    <th>历史意义</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for data in datady %}
                <tr data-id="{{ data.id }}">
                    <td class="editable" contenteditable="false" data-field="id">{{ data.id }}</td>
                    <td class="editable" contenteditable="false" data-field="establish_name">{{ data.establish_name }}</td>
                    <td class="editable" contenteditable="false" data-field="establish_time">{{ data.establish_time }}</td>
                    <td class="editable" contenteditable="false" data-field="establish_process">{{ data.establish_process }}</td>
                    <td class="editable" contenteditable="false" data-field="political_system">{{ data.political_system }}</td>
                    <td class="editable" contenteditable="false" data-field="military">{{ data.military }}</td>
                    <td class="editable" contenteditable="false" data-field="demist_time">{{ data.demist_time }}</td>
                    <td class="editable" contenteditable="false" data-field="history_meaning">{{ data.history_meaning }}</td>
                    <td>
                        <div class="btn-group">
                            <button class="edit-btn">修改</button>
                            <button class="save-btn">保存</button>
                            <a href="{% url 'dynasty_delete' data.id %}" class="delete-btn">删除</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <button onclick="exportToExcel()">导出表格</button>
    </div>
{#    修改#}
    <script src="{% static 'js/dynasty.js' %}"></script>
{#    导出文件#}
    <script src="{% static 'js/xlsxboxDy.js' %}"></script>
{#    排序#}
    <script src="{% static 'js/sort.js' %}"></script>
</body>
</html>